<script setup lang="ts">
import { onMounted, ref } from 'vue'
import interact from 'interactjs'
import signpng from '@/assets/sign.png'
import { useAppStore } from '@/stores/app'
import IconCloseCircleOutlined from './icons/IconCloseCircleOutlined.vue'

const appStore = useAppStore()
const draggableRef = ref<HTMLDivElement>()
const resizableRef = ref<HTMLDivElement>()

const position = { x: 0, y: 0 }

onMounted(() => {
  interact(draggableRef.value!).draggable({
    listeners: {
      move(event) {
        position.x += event.dx
        position.y += event.dy

        event.target.style.transform = `translate(${position.x}px, ${position.y}px)`
      },
    },
  })

  interact(resizableRef.value!).resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    listeners: {
      move: (event) => {
        let { x, y } = event.target.dataset

        x = (parseFloat(x) || 0) + event.deltaRect.left
        y = (parseFloat(y) || 0) + event.deltaRect.top

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`,
        })

        Object.assign(event.target.dataset, { x, y })
      },
    },
  })
})
</script>

<template>
  <div v-show="appStore.isShowQrcode" class="absolute top-3 left-3">
    <div ref="draggableRef">
      <div ref="resizableRef" class="relative w-24 3xl:w-36 4xl:w-48 h-24 3xl:h-36 4xl:h-48">
        <div class="relative p-1 w-full h-full border border-dashed border-orange-300">
          <div class="w-full h-full">
            <img :src="signpng" alt="sign" class="w-full h-full select-none" />
          </div>
          <div class="absolute -top-1 -left-1 border border-solid border-orange-300">
            <div class="w-2 h-2 cursor-nwse-resize"></div>
          </div>
          <div class="absolute -top-1 -right-1 border border-solid border-orange-300">
            <div class="w-2 h-2 cursor-nesw-resize"></div>
          </div>
          <div class="absolute -bottom-1 -left-1 border border-solid border-orange-300">
            <div class="w-2 h-2 cursor-nesw-resize"></div>
          </div>
          <div class="absolute -bottom-1 -right-1 border border-solid border-orange-300">
            <div class="w-2 h-2 cursor-nwse-resize"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
